<template>
    <div class="ticket">
        <div class="ticket-shelf">
            <div class="ticket-shelf-container">
                <h3 class="ticket-shelf-title">景点门票</h3>
                <p class="ticket-shelf-name">
                    <span class="ticket-shelf-border"></span>
                    <span>大连海洋公园门票</span>
                </p>
                <div class="ticket-shelf-list">
                    <div class="ticket-list-container">
                        <div class="ticket-list">
                            <div class="ticket-type-info border-bottom">
                                <div class="ticket-type-name">成人票</div>
                                <div class="ticket-type-price iconfont">
                                    ¥
                                    <span>52</span>
                                    起
                                </div>
                            </div>
                            <div class="ticket-type-info border-bottom">
                                <div class="ticket-type-name">成人票</div>
                                <div class="ticket-type-price iconfont">
                                    ¥
                                    <span>52</span>
                                    起
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DetailTicket'
}
</script>

<style lang="scss" scoped>
.ticket{
    .ticket-shelf-container{
        background: #fff;
        padding: 0 0.16rem 0.32rem;
        margin-bottom: 0.2rem;
        .ticket-shelf-title{
            overflow: hidden;
            position: relative;
            background: #fff;
            color: #212121;
            font-size: .4rem;
            line-height: .56rem;
            font-weight: bold;
            padding: .32rem 0 0 .04rem;
        }
        .ticket-shelf-name{
            font-size: .32rem;
            line-height: .44rem;
            font-weight: bold;
            color: #212121;
            align-items: baseline;
            display: flex;
            padding-top: .28rem;
            .ticket-shelf-border{
                background-image: linear-gradient(126deg,#00e0ca 0,#00bfd4 100%);
                border-radius: .06rem;
                height: .24rem;
                min-width: .08rem;
                margin-right: .12rem;
            }
        }
        .ticket-shelf-list{
            margin: 0.32rem 0 0.2rem 0;
            background: #f5f5f5;
            .ticket-list-container{
                background: #fff;
                box-shadow: 0 0.04rem 0.12rem 0 #dadada;
                border-radius: .16rem;
                .ticket-list{
                    // padding: 0.32rem 0;
                    margin: 0 0.2rem;
                    .ticket-type-info{
                        position: relative;
                        padding: 0.32rem 0;
                        display: flex;
                        .ticket-type-name{
                            flex: 4;
                        }
                        .ticket-type-price{
                            flex: 1;
                            color: #ff9800;
                            font-weight: 500;
                            font-size: 0.14rem;
                            span{
                                font-size: 0.4rem;
                                margin: 0 -0.03rem;
                            }
                            &:after{
                                content: "\e65c";
                                font-size: 0.3rem;
                                color: #ccc;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
